<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta
            name="viewport"
            content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>毕业生租房</title>
    <link
            rel="stylesheet"
            href="http://cache.amap.com/lbs/static/main1119.css"
    />
    <link
            rel="stylesheet"
            href="http://cache.amap.com/lbs/static/jquery.range.css"
    />
    <script src="http://cache.amap.com/lbs/static/jquery-1.9.1.js"></script>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=36aa77404a1c2f2fc922a569eaa49422&plugin=AMap.ArrivalRange,AMap.Scale,AMap.Geocoder,AMap.Transfer,AMap.Autocomplete"></script>
    <script src="http://cache.amap.com/lbs/static/jquery.range.js"></script>
    <style>
      /*面板控制样式*/
      .control-panel {
        position: absolute;
        top: 30px;
        right: 20px;
      }
      /*面板内容样式*/
      .control-entry {
        width: 280px;
        background-color: rgba(119, 136, 153, 0.8);
        font-family: fantasy, sans-serif;
        text-align: left;
        color: white;
        overflow: auto;
        padding: 10px;
        margin-bottom: 10px;
      }
      /*文字与右侧的距离*/
      .control-input {
        margin-left: 120px;
      }
      /*输入框宽度*/
      .control-input input[type='text'] {
        width: 160px;
      }
      /*文字样式*/
      .control-panel label {
        float: left;
        width: 120px;
      }
      /*路线规划信息窗体样式*/
      #transfer-panel {
        position: absolute;
        background-color: white;
        max-height: 80%;
        overflow-y: auto;
        top: 30px;
        left: 20px;
        width: 250px;
      }


    </style>
</head>

<body>
<div id="container"></div>
<!--显示输入地址面板-->
<div class="control-panel">
    <div class="control-entry">
        <label>选择工作地点：</label>
        <div class="control-input">
            <input id="work-location" type="text"/>
        </div>
    </div>
    <!--显示选择交通的面板-->
    <div class="control-entry">
        <label>选择通勤方式：</label>
        <div class="control-input">
            <input
                    type="radio"
                    name="vehicle"
                    value="SUBWAY,BUS"
                    onClick="takeBus(this)"
                    checked
            />
            公交+地铁
            <input
                    type="radio"
                    name="vehicle"
                    value="SUBWAY"
                    onClick="takeSubway(this)"
            />
            地铁
        </div>
    </div>
    <!--显示导入房源的面板-->
    <div class="control-entry">
        <label>导入房源文件：</label>
        <div class="control-input">
            <input type="file" name="file" onChange="importRentInfo(this)"/>
        </div>
    </div>
</div>
<div id="transfer-panel"></div>
<script>
      //地图部分
      var map = new AMap.Map('container', {
        resizeEnable: true, //页面可调整大小
        zoomEnable: true, //可缩放
        center: [114.0579807461, 22.5407758091], //地图中心，这里使用的是北京的经纬度
        zoom: 11, //缩放等级，数字越大离地球越近
      });


</script>
</body>
</html>